<template>
	<!-- <view class="page-navigation-bar">
	  <view >
	    <view class='title-container' :style="{ height:statusBarHeight+'px' }"> -->
	<!-- 不通栏 -->
	<!-- <text wx:if="{{back && !throughTop}}" style="color: {{color}}" class="back-icon iconfont icon-jiantou" bindtap="backPage"></text> -->
	<!-- 通栏 -->
	<!-- <view wx:if="{{throughTop}}" class="back-box color-333">
	        <view wx:if="{{back && !showHome}}" class="go-back" bindtap="goBack">
	          <image class="img1" src="{{imgHost}}back.png" />
	        </view>
	        <view wx:if="{{back && showHome}}" class="go-index" bindtap="goHome">
	          <image class="img2" src="{{imgHost}}home.png" />
	        </view>
	      </view> -->
	<!-- 文字 -->
	<!-- <view  :style="{ height:navBarHeight+'px',color:textColor }">
	        {{text}}
	      </view>
	    </view>
	  </view> -->
	<!-- <view wx:if="{{!throughTop}}" style="height: {{navigationBarHeight}};background-color:{{bgColor}}"></view> -->
	<!-- </view> -->
	<view class="navBarBox">
		<!-- 通栏 -->

		<!-- 状态栏占位 -->
		<view class="statusBar" :style="{ height:statusBarHeight +'px' }"></view>
		<!-- 真正的导航栏内容 -->
		<view class="navBar"
			:style="{ height:navBarHeight +'px',color:textColor,fontSize:textSize,fontWeight:textWeight  }">
			<view v-if="showHome" class="go-index">
				<image class="img2" src="../static/my/路径 755@2x.png"></image>
			</view>
			<view style="titleStyle">{{title}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "navigation-bar",
		props: {
			title: {
				type: String,
				default: ""
			},
			textColor: {
				type: String,
				default: ""
			},
			textSize: {
				type: String,
				default: ""
			},
			textWeight: {
				type: String,
				default: ""
			},
			showHome: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
			};
		},
		created() {
			this.getSystemInfo()

		},
		methods: {
			getSystemInfo() {
				// #ifdef MP-WEIXIN
				this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)
				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
				// console.log("导航栏高度：" + this.navBarHeight)
				// #endif
			},

		}
	}
</script>

<style>
	.navBar {
		display: flex;
		flex-direction: row;
		/* justify-content: center; */
		align-items: center;
		/* `		text-align: center; */
		font-size: 34rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.go-index {
		margin-right: 32%;
	}

	.img2 {
		width: 36rpx;
		height: 36rpx;
		margin-top: 20rpx;
	}
</style>